Site Fixes#890
Conversation
✅ Deploy Preview for tanstack ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
📝 WalkthroughWalkthroughAdds a lazy-loading landing code example component that defers fetching until visible and replaces prop-driven code-example rendering across multiple landing pages and the landing route; also updates many runtime and dev dependency versions in ChangesLazy-loading Landing Code Example
Dependency & Tooling Version Updates
Sequence Diagram(s)sequenceDiagram
participant Browser
participant LazyComp as LazyLandingCodeExample
participant QueryClient
participant Server as fetchLandingCodeExample
Browser->>LazyComp: mount
Browser->>LazyComp: element enters viewport (intersection)
LazyComp->>QueryClient: enable query ['landing-code-example', libraryId]
QueryClient->>Server: fetchLandingCodeExample(libraryId)
Server-->>QueryClient: returns contentRsc
QueryClient-->>LazyComp: data ready
LazyComp-->>Browser: render contentRsc
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/LazyLandingCodeExample.tsx`:
- Around line 48-50: The component currently collapses when data?.contentRsc is
falsy, conflating a true null payload with a failed query; update
LazyLandingCodeExample to destructure isError from the useQuery call and change
the guard to explicitly check for data === null (meaning intentionally empty)
while treating undefined/error separately so that when isError (or data ===
undefined) you render LandingCodeExamplePlaceholder instead of returning null;
keep the existing checks for isIntersecting and isLoading and only return null
when data === null and not when isError is true.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: da95e714-b95a-4f49-81f6-3b74899334e6
📒 Files selected for processing (7)
src/components/LazyLandingCodeExample.tsxsrc/components/landing/FormLanding.tsxsrc/components/landing/QueryLanding.tsxsrc/components/landing/RouterLanding.tsxsrc/components/landing/TableLanding.tsxsrc/components/landing/VirtualLanding.tsxsrc/routes/-library-landing.tsx
| if (isIntersecting && !isLoading && !data?.contentRsc) { | ||
| return null | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n src/components/LazyLandingCodeExample.tsx | head -70Repository: TanStack/tanstack.com
Length of output: 2422
🏁 Script executed:
find src -name "*landing-code-example*" -type fRepository: TanStack/tanstack.com
Length of output: 109
🏁 Script executed:
cat -n src/utils/landing-code-example.functions.tsRepository: TanStack/tanstack.com
Length of output: 961
🏁 Script executed:
rg "useQuery" src/components/LazyLandingCodeExample.tsx -A 15Repository: TanStack/tanstack.com
Length of output: 1347
🏁 Script executed:
rg "isError" src -t tsx -t ts | head -20Repository: TanStack/tanstack.com
Length of output: 93
🏁 Script executed:
rg "isError" src --type typescript | head -20Repository: TanStack/tanstack.com
Length of output: 100
🏁 Script executed:
rg "isError" src | head -20Repository: TanStack/tanstack.com
Length of output: 1020
🏁 Script executed:
rg "isError" src/routes/admin/index.tsx -B 5 -A 5Repository: TanStack/tanstack.com
Length of output: 392
🏁 Script executed:
rg "useQuery" src/components --max-count 5 -A 8 | head -50Repository: TanStack/tanstack.com
Length of output: 3632
🏁 Script executed:
rg "useQuery" src/components/admin/DocsCacheTab.tsx -B 2 -A 10 | head -40Repository: TanStack/tanstack.com
Length of output: 874
🏁 Script executed:
cat -n src/components/LazyLandingCodeExample.tsxRepository: TanStack/tanstack.com
Length of output: 2422
Handle query errors separately from intentional null payloads.
At line 48, the condition !data?.contentRsc treats both null (when the server intentionally returns no content) and undefined (when the query fails) the same way by returning null. This causes the component to disappear on transient failures instead of displaying the LandingCodeExamplePlaceholder. The query can fail with data being undefined, while a successful response with no content explicitly returns null.
Destructure isError from the useQuery hook and check for data === null explicitly to distinguish between these cases. When an error occurs, render the placeholder instead of collapsing the section.
Suggested patch
- const { data, isLoading } = useQuery({
+ const { data, isLoading, isError } = useQuery({
queryKey: ['landing-code-example', libraryId],
queryFn: () =>
fetchLandingCodeExample({
data: {
libraryId,
},
}),
enabled: isIntersecting,
staleTime: 5 * 60 * 1000,
})
- if (isIntersecting && !isLoading && !data?.contentRsc) {
+ if (isIntersecting && !isLoading && data === null) {
return null
}
+
+ if (isError) {
+ return <LandingCodeExamplePlaceholder />
+ }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (isIntersecting && !isLoading && !data?.contentRsc) { | |
| return null | |
| } | |
| const { data, isLoading, isError } = useQuery({ | |
| queryKey: ['landing-code-example', libraryId], | |
| queryFn: () => | |
| fetchLandingCodeExample({ | |
| data: { | |
| libraryId, | |
| }, | |
| }), | |
| enabled: isIntersecting, | |
| staleTime: 5 * 60 * 1000, | |
| }) | |
| if (isIntersecting && !isLoading && data === null) { | |
| return null | |
| } | |
| if (isError) { | |
| return <LandingCodeExamplePlaceholder /> | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/LazyLandingCodeExample.tsx` around lines 48 - 50, The
component currently collapses when data?.contentRsc is falsy, conflating a true
null payload with a failed query; update LazyLandingCodeExample to destructure
isError from the useQuery call and change the guard to explicitly check for data
=== null (meaning intentionally empty) while treating undefined/error separately
so that when isError (or data === undefined) you render
LandingCodeExamplePlaceholder instead of returning null; keep the existing
checks for isIntersecting and isLoading and only return null when data === null
and not when isError is true.
1 participant
Summary by CodeRabbit